<template>
	<view class="body">
		<!-- <view class="topLine" :style="{height: topBar+'px'}"></view> -->
		<view class="nav row_align_center" id="nav">
			<li style="color: #5B099F;z-index: 999;" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>
		</view>
		<view class="top_head">
			<view class="text_des">
				<text class="month_num">{{nowTime.month}}</text>
				<text class="month_text">月</text>
				<text class="month_year">{{nowTime.year}}</text>
				<text class="point">.</text>
				<text class="title">财务报告</text>
			</view>
			<view class="top_desc">
				<view class="text-gray">结余</view>
				<view class="remaining">{{myWallet.remaining}}</view>
				<view class="row head_block">
					<view class="flex_1">
						<text class="text-gray">支出</text>
						<text class="text_green">{{myWallet.expend}}</text>
					</view>
					<view class="flex_1">
						<text class="text-gray">收入</text>
						<text class="income">{{myWallet.income}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="row_block">
				<view class="the_title" style="justify-content: space-between;">
					<view class="left_title">
						<view class="title_icon"></view>
						<text class="margin_stand-samll font-big wide">历史趋势</text>
					</view>
					<view class="right_btn">
						<view v-for="(item,index) in historyBtn" :key="index" :class="item.state ? 'active_btn':''"
							@click="changeHistoryBtn(item.type)">{{item.name}}</view>
					</view>
				</view>
				<view class="charts-box" style="height: 200px;">
					<qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :resshow="delayload"
						:opts="{xAxis:{itemCount:12,disableGrid:true},yAxis:{disableGrid:true,data:[{disabled:true}]}}"
						:chartData="historyData" />
				</view>
			</view>
			<view class="row_block">
				<view class="the_title">
					<view class="title_icon"></view>
					<text class="margin_stand-samll font-big wide">钱都去哪了</text>
				</view>
				<view v-if="delayload" class="charts-box">
					<qiun-data-charts type="ring" canvasId="finance_b" :canvas2d="isCanvas2d" :resshow="delayload"
						:opts="{padding:[15,0,4,0],legend:{position: 'bottom'},title:{name: expendCount},subtitle: {name: '支出',fontSize:'20'}}"
						:chartData="expendDetail" />
				</view>
				<view class="the_title">
					<text class="margin_stand-samll font-middle wide">支出单笔最贵</text>
				</view>
				<view class="extend_rank">
					<view class="rank_item" v-for="(item,index) in extendRank" :key="index">
						<image :src="getImage(index)" mode="widthFix"></image>
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.desc}}</text>
						<text class="text_green money">{{item.money}}</text>
					</view>
				</view>
			</view>
			<view class="row_block">
				<view class="the_title">
					<view class="title_icon"></view>
					<text class="margin_stand-samll font-big wide">{{nowTime.month}}月明细</text>
				</view>
				<view class="detail_list">
					<view v-for="(item,index) in detail_list" :key="index" class="detail_item">
						<view>
							<view class="font-middle">{{item.date}}</view>
							<view class="font-small">{{item.time}}</view>
						</view>
						<view class="icon"><li :class="['iconfont',item.type == 'income'?'icon-income':'icon-expend']"></li></view>
						<view class="right_content">
							<view class="money">{{item.type == 'income'?'+':'-'}}{{item.money}}</view>
							<view class="text-gray font-middle">{{item.desc}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="end_block">
				<view class="the_title" style="margin-bottom: 40rpx;">
					<view class="title_icon"></view>
					<text class="margin_stand-samll font-big wide">我的支出水平</text>
				</view>
				<view class="level_bar">
					<view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}" :class="item.state ? 'text_green font-middle':''">{{item.name}}</view>
				</view>
				<view class="level_bar">
					<view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}" :class="item.state ? 'active_bar':'default_bar'"></view>
				</view>
				<view class="level_bar">
					<view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}" :class="item.state ? 'text_green font-middle':''">{{item.range}}</view>
				</view>
				<view class="extend_message">
					<li style="color: #ccc;" :class="['iconfont icon-message']"></li>
					<view>
						“ 我的支出水平已超过
						<text>{{extend_morethan}}</text>
						的乡镇居民。 ”
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ProgressBar from "../../components/progress-bar/progress-bar.vue"

	import dataOne from '../../static/json/finance/1.json';
	import expendDetail from '../../static/json/finance/2.json';
	let _now = new Date();
	let now_time = {};
	now_time.year = _now.getFullYear()
	now_time.month = _now.getMonth() + 1
	now_time.day = _now.getDay()
	export default {
		components: {
			ProgressBar
		},
		data() {
			return {
				info: this.$store.state.userInfo, //用户数据
				scrollHeight: "600px", //数据展示体高度
				isCanvas2d: this.$Config.ISCANVAS2D,
				historyData: {},
				dataOne,
				expendDetail,
				expendCount:0,
				delayload: false,
				nowTime: {
					year: now_time.year,
					month: now_time.month,
					day: now_time.day
				},
				historyBtn: [{
						name: "支出",
						state: 1,
						type: "expend"
					},
					{
						name: "收入",
						state: 0,
						type: "income"
					},
					{
						name: "结余",
						state: 0,
						type: "remaining"
					},
				],
				myWallet: {
					remaining: 3000.34,
					expend: 5240.32,
					income: 8240.66
				},
				extendRank: [{
						name: "腐败聚会",
						desc: now_time.month + "月6日12:34-跨界空间轰趴",
						money: "422.12"
					},
					{
						name: "沐浴按摩",
						desc: now_time.month + "月12日21:34-乔杉沐浴城",
						money: "318.00"
					},
					{
						name: "食品酒水",
						desc: now_time.month + "月1日21:34-school酒馆",
						money: "289.50"
					},
				],
				extend_level_bar:[
					{name:"低消费",range:"<2000元",width:"20%"},
					{name:"中间消费",range:"2000-5000元",width:"35%"},
					{name:"较高消费",range:"5000-8000元",width:"25%",state:1},
					{name:"高消费",range:">8000元",width:"20%"},
				],
				extend_morethan:"68%",
				detail_list:[
					{date:now_time.month + "-01",time:"11:01","type":"extend",money:"10.00",desc:"银行卡转出"},
					{date:now_time.month + "-01",time:"13:45","type":"income",money:"18.00",desc:"银行卡收入"},
					{date:now_time.month + "-02",time:"06:21","type":"extend",money:"123.45",desc:"信用卡转出"},
					{date:now_time.month + "-03",time:"07:38","type":"income",money:"23.00",desc:"银行卡收入"},
					{date:now_time.month + "-08",time:"16:28","type":"extend",money:"23.56",desc:"信用卡转出"},
					{date:now_time.month + "-09",time:"15:25","type":"income",money:"850.12",desc:"银行卡收入"},
					{date:now_time.month + "-09",time:"18:52","type":"income",money:"1.88",desc:"银行卡收入"},
					{date:now_time.month + "-11",time:"21:12","type":"extend",money:"220.21",desc:"银行卡转出"},
					{date:now_time.month + "-12",time:"13:08","type":"income",money:"32.28",desc:"银行卡收入"},
					{date:now_time.month + "-12",time:"12:41","type":"extend",money:"122.12",desc:"信用卡转出"},
					{date:now_time.month + "-13",time:"17:21","type":"income",money:"10.00",desc:"银行卡收入"},
				]
			};
		},
		watch: {
			"historyBtn": {
				deep: true,
				handler: function(newVal, oldVal) {
					this.filterHistoryData();
				}
			}
		},
		methods: {
			async getData() {
				uni.showLoading();
				this.filterHistoryData();
				for (let i = 0; i < this.expendDetail.series.length; i++) {
					this.expendDetail.series[i].format = "pieDemo"
				}
				let length = this.expendDetail.series[0].data.length
				for (let i = 0; i < length; i++) {
					this.expendCount += this.expendDetail.series[0].data[i].value
				}
				await setTimeout(() => {
					this.delayload = true;
					uni.hideLoading();
				}, 1000)
			},
			changeHistoryBtn(type) {
				for (let i = 0; i < this.historyBtn.length; i++) {
					if (this.historyBtn[i].type == type) {
						this.historyBtn[i].state = 1
					} else {
						this.historyBtn[i].state = 0
					}
				}
			},
			filterHistoryData() {
				let type = this.historyBtn.filter(x => x.state == 1)[0].type;
				switch (type) {
					case "expend":
						this.historyData = this.dataOne.expend;
						break;
					case "income":
						this.historyData = this.dataOne.income;
						break;
					case "remaining":
						this.historyData = this.dataOne.remaining;
						break;
				}
			},
			gotoBack() {
				this.$Common.navigateBack("/index/index");
			},
			getImage(index) {
				switch (index) {
					case 0:
						return "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e9420bcd-26cd-4faf-b47a-9949982f7c41/e8ad0f7d-15e6-4cec-81cf-ea6882d6a32e.png";
						break;
					case 1:
						return "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e9420bcd-26cd-4faf-b47a-9949982f7c41/4e7de77b-6cb3-4ccd-b42e-8009c8eb9c7a.png";
						break;
					case 2:
						return "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e9420bcd-26cd-4faf-b47a-9949982f7c41/d952cb04-0736-4ebc-98e5-6715ad16949f.png";
						break;
				}
			}
		},
		onReady() {
			//#ifndef H5
			uni.showShareMenu();
			//#endif
			this.getData()
		}
	}
</script>

<style scoped lang="scss">
	.body {
		height: 100%;
		background-color: #560594;
		margin: 0;
		padding-bottom: 20rpx;
		li{
			list-style-type: none;
		}

		.nav {
			position: fixed;
			top: 50rpx;
			left: 20rpx;
		}

		.text_green {
			color: #4ECDB6;
		}

		.main {
			width: 100%;
			padding: 0 10rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			
			.detail_list{
				height: 700rpx;
				overflow: auto;
				color: #9E9E9E;
				.detail_item{
					display: flex;
					margin: 20rpx 0;
					align-items: center;
					.icon{
						width: 30%;
						text-align: center;
						li{
							font-size: 80rpx;
						}
					}
					.right_content{
						width: 50%;
						text-align: center;
					}
					.icon-income{
						color:#4AABF9;
					}
					.icon-expend{
						color: #E45521;
					}
					.money{
						color: #000;
					}
				}
			}
			
			.extend_message{
				margin-top: 20rpx;
				color: #ccc;
				display: flex;
				text{
					color: #ff9900;
				}
			}
			
			.level_bar{
				width: 100%;
				height: 40rpx;
				border-radius: 40rpx;
				overflow: hidden;
				display: flex;
				color: #ccc;
				font-size: 20rpx;
				text-align: right;
				line-height: 40rpx;
				view{
					border-right: 2rpx solid #fff;
					position: relative;
				}
				.name{
					position: absolute;
					top: -30rpx;
					right: -40rpx;
				}
				.range{
					position: absolute;
					bottom: 30rpx;
					right: -40rpx;
				}
				.default_bar{
					background-color: #A0DFCD;
				}
				.active_bar{
					background-color: #02AE7A;
				}
			}
			.right_btn {
				float: right;
				display: flex;
				color: #ccc;
				font-size: 22rpx;

				view {
					line-height: 50rpx;
					height: 50rpx;
					margin: 0 20rpx;
				}

				.active_btn {
					padding: 0rpx 20rpx;
					border: 1px solid #ccc;
					border-radius: 40rpx;
				}
			}
			.end_block {
					width: 100%;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 12rpx;
					position: relative;
					padding: 20rpx;
				}

			.row_block {
				width: 100%;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 12rpx;
				position: relative;
				padding: 20rpx;

				&::after {
					content: "";
					height: 0px;
					width: 92%;
					position: absolute;
					transform: translateX(-50%);
					left: 50%;
					bottom: 0;
					border-top: 1px dashed #ccc;
				}
			}
			.the_title {
				display: flex;
				align-items: center;
			
				.left_title {
					display: flex;
					align-items: center;
				}
			
				.title_icon {
					background-color: #7E7E7E;
					height: 40rpx;
					width: 10rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					font-size: 16px;
					font-weight: 600;
				}
			}

			.extend_rank {
				width: 100%;
				background-color: #F5F5F5;
				box-sizing: border-box;
				padding: 10rpx;

				.rank_item {
					width: 100%;
					margin: 20rpx 0;
					box-sizing: border-box;
					display: flex;
					font-size: 26rpx;
					justify-content: space-between;
					align-items: center;

					image {
						width: 10%;
					}

					text {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						display: block;
					}

					.name {
						margin: 0 10rpx;
						color: #7D7D7D;
						width: 20%;
					}

					.desc {
						width: 50%;
						color: #ccc;
					}

					.money {
						width: 20%;
						text-align: right;
					}
				}
			}
		}

		.top_head {
			height: 435rpx;
			width: 100%;
			padding: 110rpx 10rpx 0rpx 10rpx;
			background: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e9420bcd-26cd-4faf-b47a-9949982f7c41/0edf7889-12cb-4151-94b7-a2c12d27108a.jpg") no-repeat center 0px;
			background-size: 100% 100%;
			box-sizing: border-box;

			.top_desc {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				margin-top: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.text-gray {
					font-size: 28rpx;
					color: #ccc;
					margin-right: 10rpx;
				}

				.remaining {
					font-size: 46rpx;
				}

				.flex_1 {
					flex: 1;
				}

				.head_block {
					margin-top: 20rpx;

					.income {
						color: #E34B5E;
					}
				}
			}

			.text_des {
				height: 100rpx;
				color: #fff;
				font-weight: 900;
				position: relative;
				margin-left: 60rpx;

				text {
					display: inline-block;
					height: 100%;
				}

				.month_num {
					font-size: 90rpx;
				}

				.month_text {
					font-size: 56rpx;
				}

				.month_year {
					font-size: 22rpx;
					position: absolute;
					left: 60rpx;
					top: 20rpx;
				}

				.point {
					font-size: 40rpx;
				}

				.title {
					font-size: 40rpx;
				}
			}
		}
	}
</style>
